<template>
	<div class="main ">
		<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto" label-position="top">
			<el-row :gutter="10">
				<re-col :value="12" :xs="24" :sm="24">
					<el-card shadow="always">
						<h3 class="pb-[10px]">上架操作</h3>
						<p class="el-text el-text--info el-text--default">填写如下信息，然后点击上架按钮</p>
						<div class="pb-[20px]"></div>
						<el-row :gutter="30">
							<re-col :value="12" :xs="24" :sm="24">
								<el-form-item label="上架库位" prop="warehouseArr">
									<el-cascader v-model="newFormInline.warehouseArr" :props="warehouseProps" class="w-full"></el-cascader>
								</el-form-item>
							</re-col>
							<re-col :value="12" :xs="24" :sm="24">
								<el-form-item label="物料编码" prop="code">
									<el-input v-model="newFormInline.code" clearable placeholder="请输入物料编码" :maxlength="30"
										@change="getMaterialShowByNumber"/>
								</el-form-item>
							</re-col>
							<re-col :value="12" :xs="24" :sm="24">
								<el-form-item label="上架数量" prop="number">
									<el-input-number v-model="newFormInline.number" :min="1" :max="999999999" :precision="0"
									controls-position="right" style="w-full"/>
								</el-form-item>
							</re-col>
							<re-col :value="12" :xs="24" :sm="24">
								<el-form-item label="批次号" prop="batchNo">
									<el-input v-model="newFormInline.batchNo" clearable placeholder="请输入批次号" :maxlength="30">
										<template #append>
											<div class="appendNum" @click="appendChange">生成</div>
										</template>
									</el-input>
								</el-form-item>
							</re-col>
							<re-col :value="24" :xs="24" :sm="24">
								<el-form-item label="料箱号" prop="workbinNo">
									<el-input v-model="newFormInline.workbinNo" clearable placeholder="请输入料箱号" :maxlength="150"
										 />
								</el-form-item>
							</re-col>
							<re-col :value="24" :xs="24" :sm="24">
								<span class="el-text el-text--warning el-text--default"> 请确认信息是否正确,没有什么问题的话,点击如下按钮进行上架： </span>
							</re-col>
							<re-col :value="24" :xs="24" :sm="24">
								<div class="pb-[20px]"></div>
								<el-button type="primary" @click="warehouseProductChange">上架</el-button>
								<el-button>取消</el-button>
							</re-col>
						</el-row>
					</el-card>
					
				</re-col>
				<re-col :value="12" :xs="24" :sm="24">
					<el-card shadow="always" style="height: 100%;">
						<h3 class="pb-[10px]">上架的物料信息</h3>
						<p class="el-text el-text--info el-text--default">如下是示当前要上架的物料的信息</p>
						<div class="pb-[20px]"></div>
						<el-descriptions
						    direction="vertical"
						    :column="3"
						    border
						  >
						    <el-descriptions-item label="物料编码">{{materialInfo?.code || '--'}}</el-descriptions-item>
						    <el-descriptions-item label="物料名称">{{materialInfo?.name || '--'}}</el-descriptions-item>
						    <el-descriptions-item label="所属分类">{{materialInfo?.category.name || '--'}}</el-descriptions-item>
						    <el-descriptions-item label="所属仓库">{{materialInfo?.warehouse.name || '--'}}</el-descriptions-item>
						    <el-descriptions-item label="计量单位">{{materialInfo?.unit.name || '--'}}</el-descriptions-item>
						    <el-descriptions-item label="描述">{{materialInfo?.remarks || '--'}}</el-descriptions-item>
						    
						    <el-descriptions-item label="规格">
								{{materialInfo?.spec || '--'}}
						    </el-descriptions-item>
						  </el-descriptions>
					</el-card>
				</re-col>
			</el-row>
		</el-form>
		<el-card shadow="always" class=" mt-[10px]">
			<h3 class="pb-[10px]">已上架数据</h3>
			<p class="el-text el-text--info el-text--default">如下显示本次操作已上架的物料的信息</p>
			<div class="pb-[20px]"></div>
			<pure-table
			  ref="tableRef"
			  align-whole="center"
			  showOverflowTooltip
			  table-layout="auto"
			  :loading="loading"
			  adaptive
			  :adaptiveConfig="{ offsetBottom: 108 }"
			  :data="dataList"
			  :columns="dataColumns"
			  :pagination="pagination"
			  :paginationSmall="false"
			  :header-cell-style="{
			    background: 'var(--el-fill-color-light)',
			    color: 'var(--el-text-color-primary)'
			  }"
			  @page-size-change="handleSizeChange"
			  @page-current-change="handleCurrentChange"
			>
			</pure-table>
		</el-card>
		
	</div>
</template>

<script setup lang="ts">
import { formRules } from "./utils/rule";
import ReCol from "@/components/ReCol";
// import { usePage } from "./utils/hook";
import { ref, reactive, onMounted, toRaw } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import type { CascaderProps } from 'element-plus'
import { message } from "@/utils/message";
import {
	getWarehouseListApi,
	getWarehouseAreaListApi,
	getWarehouseLocationListApi
} from "@/api/warehouseApi";
import {
	createWarehouseProductApi,
	getMaterialShowByNumberApi,
	getDispatchOrderListApi
} from "@/api/materialApi";

// const {
  
// } = usePage();
const ruleFormRef = ref();
const newFormInline = reactive({
	warehouseArr: [],
	code: null,
	materialId: null,
	number: 1,
	batchNo: "",
	workbinNo: "",
	warehouseId: null,
	warehouseAreaId: null,
	warehouseLocationId: null,
})
const formInline = reactive({
	page: 1,
	perPage: 10,
	type: 1
})
const warehouseProps: CascaderProps = {
	value: 'id',
	label: 'name',
	emitPath: true,
	lazy: true,
	lazyLoad(node, resolve) {
	    const { level } = node
		if(level === 0) {
			getWarehouseListApi({ page: 1, perPage: 999 }).then((res)=> {
				if(res?.code === 200) {
					for (let item of res.result.list) {
						item.id = item.warehouseId
						item.leaf =  false
					}
					resolve(res.result.list)
				}
			})
		} else if(level === 1) {
			getWarehouseAreaListApi({ page: 1, perPage: 999, warehouseId: node.value }).then((res)=> {
				if(res?.code === 200) {
					for (let item of res.result.list) {
						item.id = item.warehouseAreaId,
						item.leaf =  false
					}
					resolve(res.result.list)
				}
			})
		} else if(level === 2) {
			getWarehouseLocationListApi({ page: 1, perPage: 999, warehouseAreaId: node.value }).then((res)=> {
				if(res?.code === 200) {
					for (let item of res.result.list) {
						item.id = item.warehouseLocationId
						item.leaf =  true
					}
					resolve(res.result.list)
				}
			})
		}
	  },
}
// 获取仓库
const getWarehouse = async() => {
	const res = await getWarehouseListApi({ page: 1, perPage: 999 })
	
}
const appendChange = () => {
	newFormInline.batchNo = (new Date()).toLocaleString().replace(/[:/ ]/g, '')
}
const warehouseProductChange = () => {
	ruleFormRef.value.validate(valid => {
		if (valid) {
			newFormInline.warehouseId = newFormInline.warehouseArr[0]
			if(newFormInline.warehouseArr.length === 2) {
				newFormInline.warehouseAreaId = newFormInline.warehouseArr[1]
			}
			if(newFormInline.warehouseArr.length === 3) {
				newFormInline.warehouseAreaId = newFormInline.warehouseArr[1]
				newFormInline.warehouseLocationId = newFormInline.warehouseArr[2]
			}
			createWarehouseProductApi(toRaw(newFormInline)).then((res)=> {
				if(res?.code === 200) {
					message(`上架成功!`, {
					  type: "success"
					});
					ruleFormRef.value.resetFields();
					getInitTable()
				}
			})
		}
	})
}
const materialInfo = ref({
	code: '--',
	name: '--',
	category: {
		name: '--'
	},
	warehouse: {
		name: '--'
	},
	unit: {
		name: '--'
	},
	remarks: '',
	spec: ''
})
const getMaterialShowByNumber = async() => {
	if(newFormInline.code) {
		const res = await getMaterialShowByNumberApi({code: newFormInline.code})
		if(res?.code === 200) {
			materialInfo.value = res?.result
			newFormInline.materialId = res?.result?.materialId
		}
	}
}
const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
});
const loading = ref(false)
const dataList = ref([])
const dataColumns: TableColumnList = [
	{
	  label: "ID",
	  prop: "warehouseProductFlowlogId",
	  width: 80
	},
	{
	  label: "物料编码",
	  prop: "material.code"
	},
	{
	  label: "物料名称",
	  prop: "material.name"
	},
	{
	  label: "计量单位",
	  prop: "material.unit.name"
	},
	{
	  label: "上架数量",
	  prop: "changeNum"
	},
	{
	  label: "库位",
	  prop: "warehouseLocation.name",
	  formatter: (row) => {
	  	return row.warehouse?.name+'/'+row.warehouseArea?.name+'/'+row.warehouseLocation?.name
	  }
	},
	{
	  label: "料箱号",
	  prop: "workbinNo"
	},
	{
	  label: "批次号",
	  prop: "batchNo"
	},
]
const getInitTable = async() => {
	loading.value = true;
	const { result } = await getDispatchOrderListApi(toRaw(formInline));
	dataList.value = result.list;
	pagination.total = result.total;
	pagination.pageSize = result.perPage*1;
	pagination.currentPage = result.page*1;
	
	setTimeout(() => {
	  loading.value = false;
	}, 150);
}
const handleSizeChange = (val) => {
	formInline.page = 1;
	formInline.perPage = val;
	getInitTable()
}
const handleCurrentChange = (val) => {
	formInline.page = val;
	getInitTable()
}
onMounted(()=> {
	getInitTable()
})
</script>

<style scoped>
	.main-content {
	    margin: 10px 10px 0 !important;
	}
	.appendNum {
		cursor: pointer;
	}
	:deep(.el-input-number) {
		width: 100%;
	}
</style>